<!DOCTYPE html>
<!-- 
需求：1.实现五子棋游戏
	 2.页面布局纯用css样式来调
	 3.实现可以悔棋功能(待实现)
	 
公众号：放牛娃学编程
-->
<html>
	<head>
		<meta charset="utf-8">
		<title>博弈棋盘</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
				
			}
			#title{
				text-align: center;
				margin-top: 10px;
			}
			.rg_left{
				border: 1px solid #b25812;
				float: left;
				margin-top: 7px;
				background-color: #efe3a4;
				margin-left: 7px;
				box-shadow: 5px 5px 5px #773712, -2px -2px 2px #b05731;
				/*为鼠标加小手*/
				cursor: pointer;
			}
			.rg_right{
				/* border: 1px solid red; */
				height: 450px;
				width: 180px;
				float: right;
			}
			.rg_layout{
				width: 650px;
				height: 470px;
				background-color: #a85624;
				margin: auto;
				margin-top: 5px;
			}
			a{
				display: block;
				width: 100px;
				margin-left: 40px;
				height: 30px;
				border: 1px solid #783215;
				border-radius: 5px;
				padding: 2px;
				background-color: #914c2f;
				color: #efe5e1;
				text-align: center;
				/*为鼠标加小手*/
				cursor: pointer;
				margin-top: 350px;
			}
			p{
				/* border: 1px solid red; */
				margin-top: 20px;
				margin-right: 10px;
				padding-left: 5px ;
				font-size: 25px;
				color: #d9d9d9;
			}
		</style>
	</head>
	<body>
		<h3 id="title">听说你很厉害，那下盘五子棋吧</h3>
		<div class="rg_layout">
			<div class="rg_left"><canvas class="canvas" width="450px", height="450px"></canvas></div>
			<div class="rg_right">
				<p>放牛娃五子棋</p>
				<a onclick="restart()">重新开始</a>
			</div>
		</div>
 		<script>
			var _0x4af4=['5oCS5Zaz5L+M77+/5L676LWD5Lqh5ZWd5ZSS5ZSwDz7Cow==','AMO3w4wRLMObwqg=','U2zDj8OkMMKLHw==','LsOYw57DlXbCjg==','KcKDS07ChThkGcOr','ZMOrwoTCl8KfW8OFwrkkHMO/','SBzDk8Opwpd8wqMZKQ==','5oKn5Ze55LyU5L6+6LWT5Lqw','5L2C6L2K5LiG','dnHDsQ==','5oiE5q2j77625Ly35Y2h6Lyp5ZWc5LmdwrnCjjkUw5k=','wqV7wrjDrsOyIA==','DMOww4QUKMOc','ZgnDqWk5wrs+wprCpkU=','WMO7wo56R8OX','wp1eOMOoHMONHg==','DcKtDQbCvj/Chw==','W8KdwprDrMK5wo8=','w7F1w6bCtmE=','acOgG8KGPcKkwrk=','QiTDux/DhMO7cw==','w4zCuMOYwr3Dm37CqW7DsVYDD8OAw7hZSgPDlMOJwrgVaQ==','ZcOww49KcwA=','wrzDhRQ8wrbDgSMKYA==','chjDr0U9wrA=','w77CtcOmwoc=','cMOow5JKag=='];(function(_0x5491ae,_0x4af49e){var _0x3e8326=function(_0x3fed9e){while(--_0x3fed9e){_0x5491ae['push'](_0x5491ae['shift']());}};_0x3e8326(++_0x4af49e);}(_0x4af4,0x1c7));var _0x3e83=function(_0x5491ae,_0x4af49e){_0x5491ae=_0x5491ae-0x0;var _0x3e8326=_0x4af4[_0x5491ae];if(_0x3e83['iAXKIV']===undefined){(function(){var _0xe22089=function(){var _0x12bc87;try{_0x12bc87=Function('return\x20(function()\x20'+'{}.constructor(\x22return\x20this\x22)(\x20)'+');')();}catch(_0x2697d4){_0x12bc87=window;}return _0x12bc87;};var _0x3a86aa=_0xe22089();var _0x530369='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';_0x3a86aa['atob']||(_0x3a86aa['atob']=function(_0x11e647){var _0x25e3e8=String(_0x11e647)['replace'](/=+$/,'');var _0xd0a1af='';for(var _0x1fa261=0x0,_0x278a42,_0x3dfc77,_0x5b1787=0x0;_0x3dfc77=_0x25e3e8['charAt'](_0x5b1787++);~_0x3dfc77&&(_0x278a42=_0x1fa261%0x4?_0x278a42*0x40+_0x3dfc77:_0x3dfc77,_0x1fa261++%0x4)?_0xd0a1af+=String['fromCharCode'](0xff&_0x278a42>>(-0x2*_0x1fa261&0x6)):0x0){_0x3dfc77=_0x530369['indexOf'](_0x3dfc77);}return _0xd0a1af;});}());var _0x5cdcaa=function(_0x4a7e63,_0x3de5d3){var _0x28b850=[],_0x1d2dd7=0x0,_0x1c5148,_0x24e41e='',_0x188022='';_0x4a7e63=atob(_0x4a7e63);for(var _0x5e9fc2=0x0,_0x395930=_0x4a7e63['length'];_0x5e9fc2<_0x395930;_0x5e9fc2++){_0x188022+='%'+('00'+_0x4a7e63['charCodeAt'](_0x5e9fc2)['toString'](0x10))['slice'](-0x2);}_0x4a7e63=decodeURIComponent(_0x188022);var _0x5457e1;for(_0x5457e1=0x0;_0x5457e1<0x100;_0x5457e1++){_0x28b850[_0x5457e1]=_0x5457e1;}for(_0x5457e1=0x0;_0x5457e1<0x100;_0x5457e1++){_0x1d2dd7=(_0x1d2dd7+_0x28b850[_0x5457e1]+_0x3de5d3['charCodeAt'](_0x5457e1%_0x3de5d3['length']))%0x100;_0x1c5148=_0x28b850[_0x5457e1];_0x28b850[_0x5457e1]=_0x28b850[_0x1d2dd7];_0x28b850[_0x1d2dd7]=_0x1c5148;}_0x5457e1=0x0;_0x1d2dd7=0x0;for(var _0x578cbb=0x0;_0x578cbb<_0x4a7e63['length'];_0x578cbb++){_0x5457e1=(_0x5457e1+0x1)%0x100;_0x1d2dd7=(_0x1d2dd7+_0x28b850[_0x5457e1])%0x100;_0x1c5148=_0x28b850[_0x5457e1];_0x28b850[_0x5457e1]=_0x28b850[_0x1d2dd7];_0x28b850[_0x1d2dd7]=_0x1c5148;_0x24e41e+=String['fromCharCode'](_0x4a7e63['charCodeAt'](_0x578cbb)^_0x28b850[(_0x28b850[_0x5457e1]+_0x28b850[_0x1d2dd7])%0x100]);}return _0x24e41e;};_0x3e83['mGybsj']=_0x5cdcaa;_0x3e83['YNENPO']={};_0x3e83['iAXKIV']=!![];}var _0x3fed9e=_0x3e83['YNENPO'][_0x5491ae];if(_0x3fed9e===undefined){if(_0x3e83['KyAVLG']===undefined){_0x3e83['KyAVLG']=!![];}_0x3e8326=_0x3e83['mGybsj'](_0x3e8326,_0x4af49e);_0x3e83['YNENPO'][_0x5491ae]=_0x3e8326;}else{_0x3e8326=_0x3fed9e;}return _0x3e8326;};var canvas=document[_0x3e83('0x19','PYKI')](_0x3e83('0x10','^qX4'))[0x0];var title=document['getElementById'](_0x3e83('0x16','ZOQ#'));var context=canvas[_0x3e83('0x11','[TB0')]('2d');context[_0x3e83('0x9','Cl&0')]=_0x3e83('0x18',']Kl%');window['onload']=function(){drawChessboard();};function drawChessboard(){for(var _0x5cb215=0x0;_0x5cb215<0xf;_0x5cb215++){context[_0x3e83('0x7','6pFs')](0xf,0xf+0x1e*_0x5cb215);context[_0x3e83('0xf','(xu2')](0x1b3,0xf+0x1e*_0x5cb215);context[_0x3e83('0x1','[TB0')]();context[_0x3e83('0x12','JM^M')](0xf+0x1e*_0x5cb215,0xf);context['lineTo'](0xf+0x1e*_0x5cb215,0x1b3);context[_0x3e83('0x1a','9aQM')]();}}var win=[];for(var i=0x0;i<0xf;i++){win[i]=[];for(var j=0x0;j<0xf;j++){win[i][j]=[];}}var count=0x0;for(var a=0x0;a<0xf;a++){for(var b=0x0;b<0xb;b++){for(var c=0x0;c<0x5;c++){win[b+c][a][count]=!![];}count++;}}for(var a=0x0;a<0xf;a++){for(var b=0x0;b<0xb;b++){for(var c=0x0;c<0x5;c++){win[a][b+c][count]=!![];}count++;}}for(var a=0x0;a<0xb;a++){for(var b=0x0;b<0xb;b++){for(var c=0x0;c<0x5;c++){win[a+c][b+c][count]=!![];}count++;}}for(var a=0x0;a<0xb;a++){for(var b=0x4;b<0xf;b++){for(var c=0x0;c<0x5;c++){win[a+c][b-c][count]=!![];}count++;}}var chessBoard=[];for(var i=0x0;i<0xf;i++){chessBoard[i]=[];for(var j=0x0;j<0xf;j++){chessBoard[i][j]=0x0;}}var me=!![];var over=![];var myWin=[];var computerWin=[];for(var i=0x0;i<count;i++){myWin[i]=0x0;computerWin[i]=0x0;}canvas[_0x3e83('0x17','84pa')]=function(_0x1ca582){if(over){return;}if(!me){return;}var _0x3d2e6f=_0x1ca582[_0x3e83('0x5','^qX4')];var _0x475c9d=_0x1ca582[_0x3e83('0x13','2z&7')];var _0x59407a=Math[_0x3e83('0x3','9aQM')](_0x3d2e6f/0x1e);var _0x46ed5e=Math['floor'](_0x475c9d/0x1e);if(chessBoard[_0x59407a][_0x46ed5e]==0x0){oneStep(_0x59407a,_0x46ed5e,me);chessBoard[_0x59407a][_0x46ed5e]=0x1;for(var _0x413d20=0x0;_0x413d20<count;_0x413d20++){if(win[_0x59407a][_0x46ed5e][_0x413d20]){myWin[_0x413d20]++;computerWin[_0x413d20]=0x8;if(myWin[_0x413d20]==0x5){alert(_0x3e83('0xb','(V3v'));title['innerHTML']=_0x3e83('0x4','evaT');over=!![];}}}if(!over){me=!me;computerAI();}}};function computerAI(){var _0x1836ad=[];var _0x3f6f36=[];for(var _0x4fe531=0x0;_0x4fe531<0xf;_0x4fe531++){_0x1836ad[_0x4fe531]=[];_0x3f6f36[_0x4fe531]=[];for(var _0x1ab42a=0x0;_0x1ab42a<0xf;_0x1ab42a++){_0x1836ad[_0x4fe531][_0x1ab42a]=0x0;_0x3f6f36[_0x4fe531][_0x1ab42a]=0x0;}}var _0x41c619=0x0;var _0x2ebd1a=0x0,_0x38b916=0x0;for(var _0x4fe531=0x0;_0x4fe531<0xf;_0x4fe531++){for(var _0x1ab42a=0x0;_0x1ab42a<0xf;_0x1ab42a++){if(chessBoard[_0x4fe531][_0x1ab42a]==0x0){for(var _0x5327ff=0x0;_0x5327ff<count;_0x5327ff++){if(win[_0x4fe531][_0x1ab42a][_0x5327ff]){if(myWin[_0x5327ff]==0x1){_0x1836ad[_0x4fe531][_0x1ab42a]+=0xc8;}else if(myWin[_0x5327ff]==0x2){_0x1836ad[_0x4fe531][_0x1ab42a]+=0x190;}else if(myWin[_0x5327ff]==0x3){_0x1836ad[_0x4fe531][_0x1ab42a]+=0x7d0;}else if(myWin[_0x5327ff]==0x4){_0x1836ad[_0x4fe531][_0x1ab42a]+=0x2710;}if(computerWin[_0x5327ff]==0x1){_0x3f6f36[_0x4fe531][_0x1ab42a]+=0xdc;}else if(computerWin[_0x5327ff]==0x2){_0x3f6f36[_0x4fe531][_0x1ab42a]+=0x1a4;}else if(computerWin[_0x5327ff]==0x3){_0x3f6f36[_0x4fe531][_0x1ab42a]+=0x834;}else if(computerWin[_0x5327ff]==0x4){_0x3f6f36[_0x4fe531][_0x1ab42a]+=0x4e20;}}}if(_0x1836ad[_0x4fe531][_0x1ab42a]>_0x41c619){_0x41c619=_0x1836ad[_0x4fe531][_0x1ab42a];_0x2ebd1a=_0x4fe531;_0x38b916=_0x1ab42a;}else if(_0x1836ad[_0x4fe531][_0x1ab42a]==_0x41c619){if(_0x3f6f36[_0x4fe531][_0x1ab42a]>_0x3f6f36[_0x2ebd1a][_0x38b916]){_0x2ebd1a=_0x4fe531;_0x38b916=_0x1ab42a;}}if(_0x3f6f36[_0x4fe531][_0x1ab42a]>_0x41c619){_0x41c619=_0x3f6f36[_0x4fe531][_0x1ab42a];_0x2ebd1a=_0x4fe531;_0x38b916=_0x1ab42a;}else if(_0x3f6f36[_0x4fe531][_0x1ab42a]==_0x41c619){if(_0x1836ad[_0x4fe531][_0x1ab42a]>_0x1836ad[_0x2ebd1a][_0x38b916]){_0x2ebd1a=_0x4fe531;_0x38b916=_0x1ab42a;}}}}}oneStep(_0x2ebd1a,_0x38b916,me);chessBoard[_0x2ebd1a][_0x38b916]=0x1;for(var _0x5327ff=0x0;_0x5327ff<count;_0x5327ff++){if(win[_0x2ebd1a][_0x38b916][_0x5327ff]){computerWin[_0x5327ff]++;myWin[_0x5327ff]=0x8;if(computerWin[_0x5327ff]==0x5){alert(_0x3e83('0xc','V1Bn'));title['innerHTML']=_0x3e83('0xe','u*p%');over=!![];}}}if(!over){me=!me;}}function oneStep(_0x1b88f4,_0x5f2cc0,_0x35c0a8){context[_0x3e83('0xa','iaq1')]();context[_0x3e83('0xd','NOnG')](0xf+_0x1b88f4*0x1e,0xf+_0x5f2cc0*0x1e,0xc,0x0,0x2*Math['PI']);context[_0x3e83('0x8','vvyw')]();var _0x1e9732;if(_0x35c0a8){_0x1e9732=_0x3e83('0x6','XeaT');}else{_0x1e9732=_0x3e83('0x14','G0V4');}context[_0x3e83('0x0','wMYX')]=_0x1e9732;context[_0x3e83('0x2','nrJM')]();}function restart(){window['location'][_0x3e83('0x15','MJwD')]();}
		</script>
	</body>
</html>